<template>
	<div class="menu-page">
		<el-row :gutter="10">
			<el-col :span="4">
				<el-card class="box-card" shadow="never" style="height: 85vh">
					<div class="card-main-title border-line" style="padding: 10px 0px 16px 0px">系统模块</div>
					<div v-for="(item, index) in moduleList" :key="item.menuId" class="item-li border-line" :class="{ active: activeIndex == index }" @click="handleModuleClick(index, item.menuId)">{{ item.menuName }}</div>
				</el-card>
			</el-col>
			<el-col :span="20">
				<el-card class="box-card" shadow="never" style="height: 85vh; overflow-y: auto">
					<div class="menu-box">
						<el-button type="primary" v-has="'system:menu:add'" @click="handleAdd">
							<el-icon><ele-Plus /></el-icon>
							&nbsp;新增
						</el-button>
						<div class="menu-item" @click="handleSearch()">
							<el-tooltip content="刷新" placement="top">
								<el-button circle>
									<el-icon><ele-Refresh /></el-icon>
								</el-button>
							</el-tooltip>
						</div>
					</div>
					<vxe-table ref="menuTreeRef" align="center" :auto-resize="true" border="default" :data="tableData" empty-text="暂无数据" :row-config="{ keyField: 'menuId' }" :sync-resize="true" :tree-config="{ lazy: true, childrenField: 'children', hasChild: 'hasChild', iconOpen: 'vxe-icon-square-minus', iconClose: 'vxe-icon-square-plus', loadMethod: loadChildrenMethod, trigger: 'cell' }">
						<vxe-column align="left" field="menuName" min-width="150" show-overflow="tooltip" title="菜单名称" tree-node />
						<vxe-column field="size" min-width="80" title="图标">
							<template #default="{ row }">
								<SvgIcon :name="row.icon" />
							</template>
						</vxe-column>
						<vxe-column field="orderNum" min-width="60" title="排序" />
						<vxe-column field="path" min-width="200" show-overflow="tooltip" title="访问路径" />
						<vxe-column field="component" min-width="200" show-overflow="tooltip" title="组件路径" />
						<vxe-column field="status" min-width="100" title="状态">
							<template #default="{ row }">
								<el-tag size="small" effect="plain" :type="row.status == '0' ? 'success' : 'danger'">{{ row.status == '0' ? '正常' : '停用' }}</el-tag>
							</template>
						</vxe-column>
						<vxe-column field="menuType" :formatter="formatMenuType" min-width="100" title="类型" />
						<vxe-column field="visible" min-width="100" title="显示状态">
							<template #default="{ row }">{{ row.visible == '0' ? '显示' : '隐藏' }} </template>
						</vxe-column>
						<vxe-column field="operation" fixed="right" min-width="150" title="操作">
							<template #default="{ row }">
								<div class="vxe-action">
									<a @click="handleEdit(row)" v-has="'system:menu:update'">修改</a>
									<a @click="handleDelete(row)" v-has="'system:menu:delete'">删除</a>
									<a v-if="row.menuType != 'B'" v-has="'system:menu:add'" @click="handleAddRow(row)">新增</a>
								</div>
							</template>
						</vxe-column>
					</vxe-table>
				</el-card>
			</el-col>
		</el-row>
		<EditMenuModal ref="editModalRef" @peak-modal-ok="handleSearch" />
	</div>
</template>
<script name="MenuManage" setup>
import global from '@/utils/global'
const EditMenuModal = defineAsyncComponent(() => import('@/views/system/menu/leafPages/EditMenuModal.vue'))
import useModal from '@/hooks/useModal'

/*
 *@Description: 状态初始化
 *@MethodAuthor: liuYuFeng
 *@Date: 2023-08-24 10:24:23
 */
const { editModalRef, handleUpdate } = useModal()
const state = reactive({
	menuPlatform: 'PC',
	activeIndex: 0,
	moduleList: [],
	tableData: [],
	menuTreeRef: null,
})

const { activeIndex, moduleList, tableData, menuTreeRef } = toRefs(state)

/*
 *@Description: 生命周期
 *@MethodAuthor: liuYuFeng
 *@Date: 2023-08-24 10:26:11
 */
onMounted(() => {
	getModuleList()
})

/*
 *@Description: 方法模块
 *@MethodAuthor: liuYuFeng
 *@Date: 2023-08-24 10:25:42
 */
const handleModuleClick = (index, menuId) => {
	state.activeIndex = index
	getMenuList(menuId)
}
//获取模块列表
const getModuleList = () => {
	global.$fetchPostData(`/meta-system/web/v1/sysMenu/menuModuleList`, { menuPlatform: state.menuPlatform }).then(data => {
		if (data.code == 200) {
			state.moduleList = data.data
			const menuId = data.data.length > 0 ? data.data[0].menuId : ''
			if (menuId) {
				getMenuList(menuId)
			} else {
				state.tableData = []
			}
		} else {
			global.$baseMessage(data.msg, 'error')
		}
	})
}
const getMenuList = menuId => {
	global.$fetchPostData(`/meta-system/web/v1/sysMenu/list`, { parentId: menuId }).then(data => {
		if (data.code == 200) {
			state.tableData = data.data
			state.menuTreeRef.clearTreeExpand()
		} else {
			global.$baseMessage(data.msg, 'error')
		}
	})
}
const loadChildrenMethod = ({ row }) => {
	return new Promise(resolve => {
		global.$fetchPostData(`/meta-system/web/v1/sysMenu/list`, { parentId: row.menuId }).then(data => {
			if (data.code == 200) {
				resolve(data.data)
			} else {
				resolve([])
				global.$baseMessage(data.msg, 'error')
			}
		})
	})
}
// 格式化菜单
const formatMenuType = ({ cellValue }) => {
	let menuType = '--'
	switch (cellValue) {
		case 'M':
			menuType = '模块'
			break
		case 'D':
			menuType = '目录'
			break
		case 'N':
			menuType = '菜单'
			break
		case 'B':
			menuType = '按钮'
			break
		default:
			menuType = '--'
	}
	return menuType
}
// 删除菜单
const handleDelete = row => {
	global.$baseConfirm(
		`是否确认删除名称为"--【${row.menuName}】--"的数据?`,
		'提示',
		() => {
			global
				.$fetchPostData(`/meta-system/web/v1/sysMenu/deleteMenuById`, {
					idStr: row.menuId,
				})
				.then(data => {
					if (data.code == 200) {
						global.$baseMessage(data.msg, 'success')
						state.menuTreeRef.clearTreeExpand()
						handleSearch()
					} else {
						global.$baseMessage(data.msg, 'error')
					}
				})
		},
		() => {}
	)
}
// 菜单更新
const handleEdit = row => {
	handleUpdate({
		flag: 'update',
		...row,
	})
}
// 菜单新增
const handleAdd = () => {
	handleUpdate({
		flag: 'add',
		menuPlatform: state.menuPlatform,
	})
}
// 新增子级
const handleAddRow = row => {
	handleUpdate({
		flag: 'child',
		...row,
		menuPlatform: state.menuPlatform,
	})
}
// 配置字段

//主动刷新表格
const handleSearch = () => {
	getMenuList(state.moduleList[state.activeIndex].menuId)
}
</script>
<style lang="scss" scoped>
.tab-menus {
	margin-bottom: 10px;
	background-color: #fff;
	:deep() {
		.el-tabs__header {
			padding: 10px 12px 0px 16px;
			margin: 0px !important;
		}
	}
}
.item-li {
	padding: 18.5px 10px;
	font-size: 14px;
	cursor: pointer;
	&.active {
		font-weight: bold;
		background-color: #e9f2ff;
	}
}
.border-line {
	border-bottom: 1px solid #e8eaec;
}
.box-card {
	:deep() {
		.el-card__body {
			padding: 8px 10px;
		}
	}
	.menu-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 8px;
	}
}
</style>
